<template>
  <div class="admin">
    <div class="admin-table-container">
      <div class="admin-table" >
        <div class="table-thead">
            <div class="table-thead-tr">
              <div class="item">姓名</div>
              <div class="item">姓别</div>
              <div class="item">手机</div>
              <div class="item">事由</div>
              <div class="item">时间</div>
            </div>
        </div>
        <div class="table-tbody">
          <div class="table-tbody-tr" v-for="item in recordList" :key="item.id"
          @click="alertDetails(item)" >
            <div class="item">{{item.name}}</div>
            <div class="item">{{item.gender}}</div>
            <div class="item">{{item.phone}}</div>
            <div class="item">{{item.reason}}</div>
            <div class="item">{{item.time}}</div>
          </div>
        </div>

      </div>

      <alert-model :content="alertMoedlContent"
      :open="openAlertModel"
      @close="closeAlertModel"
      >alertDetails</alert-model>

    </div>
  </div>
</template>

<script lang="ts">

import { ref, toRefs, reactive } from 'vue'
import AlertModel from '../../components/alertModel/AlertModel.vue'
import { reqQueryRecords } from '../../api/index'

// 返回结果接口
interface IResult {
  code:number,
  data:any,
  msg:string
}
// 来访人表一条数据接口
interface IRecord{
  id:''
  name:''
  gender:''
  phone:''
  reason:''
  time:''
}
// 弹窗展示一条数据详情接口
interface IAlertRecord{
  name:''
  gender:''
  phone:''
  reason:''
  time:''
}
function handleRecordList(){
    //控制弹窗
    const openAlertModel = ref(false)
    // 弹窗内容
    let alertMoedlContent:IAlertRecord = reactive({
        name:'',
        gender:'',
        phone:'',
        reason:'',
        time:''
    })
    // 所有来访人记录List
    let recordList:Array<IRecord> = reactive([])

    function alertDetails(item:IAlertRecord):void{
      openAlertModel.value = true
      Object.assign(alertMoedlContent,item)  
    }

    function closeAlertModel(value:boolean) {
      openAlertModel.value = value
    }

    const queryRecordsList= async function(){
      let res = await reqQueryRecords()
      let result:IResult = res.data    
      Object.assign(recordList,result.data)
      console.log(recordList)
    }
   
   queryRecordsList()
   return {
     openAlertModel,
     alertMoedlContent,
     recordList,
     alertDetails,
     closeAlertModel
   }
}
export default {
  name: 'Admin',
  components: {
    AlertModel
  },
  setup() {
     const recordList = handleRecordList()
     
    return {
      ...toRefs(recordList)
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.admin-table-container{
  background-color:#fff;
  box-sizing:border-box;
  overflow: hidden;
  margin:0 auto;
}
.admin-table{
  width:100%;
  font-size:2.4rem;
  background-color:#fff;
  box-sizing: border-box;
}
.table-thead-tr{
  display:flex;
  padding:0.5rem 1rem;
  align-items: center;
  font-size:2.8rem;
  color: #00a1d6;
}
.table-tbody-tr{
  display:flex;
  padding:1rem 1rem;
  align-items: center;
}
.item{
  box-sizing:border-box;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:left;
  padding:0 0.8rem;
  }
.table-thead-tr .item:nth-child(1),
.table-tbody-tr .item:nth-child(1){
  width:10rem;
}
.table-thead-tr .item:nth-child(2),
.table-tbody-tr .item:nth-child(2){
  width:10rem;
}
.table-thead-tr .item:nth-child(3),
.table-tbody-tr .item:nth-child(3){
 width:17rem;
}
.table-thead-tr .item:nth-child(4),
.table-tbody-tr .item:nth-child(4){
  flex:1;
}
.table-thead-tr .item:nth-child(5),
.table-tbody-tr .item:nth-child(5){
  width:17rem;
}
</style>
